<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-04-20 09:56:08
 * @LastEditors: 976901273@qq.com
 * @LastEditTime: 2023-07-26 10:13:33
 * @Description:
 *
-->

<template>
  <div class="top5-network-ctn">
    <div class="title">实时网络监控 Top5</div>
    <div class="content">
      <el-table
          :data="tableList"
          stripe
          :header-cell-style="{ height: '40px !important',color: 'rgba(219, 241, 255, 1)',background:'rgba(54, 78, 120, 0.8400) !important'}"
          :row-style="{background:'rgba(48, 102, 142, 0.3700)',color:'rgba(176, 207, 232, 1)'}"
          :cell-style="{height:'35px'}"
          empty-text="暂无数据"
        >
          <el-table-column
            prop="Top5Link"
            align="center"
            label="Top5链路"
            show-overflow-tooltip
          />
          <el-table-column
            prop="linkName"
            align="center"
            label="链路名称"
            width="80"
            show-overflow-tooltip
          />
          <el-table-column
            prop="linkType"
            align="center"
            label="链路类型"
            width="80"
            show-overflow-tooltip
          />
          <el-table-column
            prop="realtimeDelay"
            align="center"
            label="实时时延"
            width="80"
            show-overflow-tooltip
          />
          <el-table-column
            prop="realtimeTraffic"
            align="center"
            label="实时流量"
            width="80"
            show-overflow-tooltip
          />
        </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Top5Network',
  props: {},
  data() {
    return {
      tableList: [
        {
          Top5Link: 'Cluster01 - Cluster02', // 链路起始
          linkName: 'link01', // 链路名称
          linkType: 'Internet', // 链路类型
          realtimeDelay: '40ms', // 实时演示
          realtimeTraffic: '30Mbps'// 实时流量
        },
        {
          Top5Link: 'Cluster02 - Cluster03', // 链路起始
          linkName: 'link02', // 链路名称
          linkType: 'Internet', // 链路类型
          realtimeDelay: '33ms', // 实时演示
          realtimeTraffic: '102Mbps'// 实时流量
        },
        {
          Top5Link: 'Cluster03 - Cluster02', // 链路起始
          linkName: 'link03', // 链路名称
          linkType: 'MPLS', // 链路类型
          realtimeDelay: '60ms', // 实时演示
          realtimeTraffic: '102Mbps'// 实时流量
        },
        {
          Top5Link: 'Cluster04 - Cluster02', // 链路起始
          linkName: 'link04', // 链路名称
          linkType: 'Internet', // 链路类型
          realtimeDelay: '40ms', // 实时演示
          realtimeTraffic: '102Mbps'// 实时流量
        },
        {
          Top5Link: 'Cluster01 - Cluster04', // 链路起始
          linkName: 'link05', // 链路名称
          linkType: 'Internet', // 链路类型
          realtimeDelay: '45ms', // 实时演示
          realtimeTraffic: '5Mbps'// 实时流量
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.top5-network-ctn {
  width: 494px;

  .title {
    width: 494px;
    height: 28px;
    line-height: 28px;
    background: url("~@/assets/imgs/situation/bg_title_normal.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 25px;
    .textStyle(16px , 600, #03d3ff);
  }

  .content {
    margin-top: 8px;
    box-sizing: border-box;
    //padding: 8px 10px 0;
    height: 210px;
    background: linear-gradient(
      351deg,
      rgba(60, 108, 158, 0.37) 0%,
      rgba(19, 61, 91, 0.35) 100%
    );

    .titles {
      height: 34px;
      background: rgba(54, 78, 120, 0.84);
      display: flex;
      align-items: center;

      .title-item {
        .textStyle(14px , 500, #DBF1FF);
        box-sizing: border-box;
        &.t1 {
          width: 125px;
          padding-left: 14px;
        }
        &.t2 {
          width: 105px;
        }
        &.t3 {
          width: 105px;
        }
        &.t4 {
          width: 75px;
        }
        &.t5 {
          flex: 1;
        }
      }
    }
  }
}
</style>
<style lang="less">
.top5-network-ctn {
     .el-table--striped .el-table__body tr.el-table__row--striped td {
       background-color:rgba(0, 21, 39, 0.3100) !important; /* def2ff f2faff */
    }
  .el-table,
       .el-table__expanded-cell {
        background-color: transparent !important;
      }
      /* 表格内背景颜色 */
       .el-table th,
       .el-table tr,
      .el-table td {
        background-color: transparent !important;
        border:0 !important; //去除表格
      }
    /*去除底边框*/
    el-table td.el-table__cell {
      border:0 !important;
    }
    el-table th.el-table__cell.is-leaf {
      border:0 !important;
    }
    .el-table .el-table__cell {
    padding: 0px 0px !important;
    }
    //去除鼠标悬浮效果
    .el-table::before {
    height: 0px !important;
    }
}
</style>
